import React, { Component } from 'react';
import axios from 'axios';
import './../mingju/mingju.scss';
import $ from 'jquery';
import { Pagination } from 'antd';
import BaseHeader from '@/components/base/baseHeader';
import GlobalBottom from '@/components/base/GlobalBottom';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        list:[],
        sid:''
      }
    }
    componentDidMount () {
      // console.log(this.props);
      axios.get('http://poem.daxunxun.com:8000/api/juzi',{dataType:'json'})
          .then((res) => {
            // console.log(res.data)
            this.setState({
              list:res.data,
            })
          })
    }
    goDetail (sid) {
      console.log(this.props);
      this.props.history.push('/mingjudetail/' + sid)
    }
    onChange (page) {
      console.log(page);
    }
    shiwenCollection (event) {
      console.log(event.currentTarget)
      var currentCollection = event.currentTarget;
      var uid = localStorage.getItem('uid')*1;
      var sid = localStorage.getItem('sid')*1;
      if($(currentCollection).children().attr('class') === 'iconfont icon-shoucang'){
        $(currentCollection).children().attr('class','iconfont icon-daohangshoucangyishoucang')
        console.log(uid,sid)
        axios.get(`http://poem.daxunxun.com:8000/api/collect/add?uid=${uid}&sid=${sid}`)
            .then((res) => {
              console.log(`http://poem.daxunxun.com:8000/api/collect/add?uid=${uid}&sid=${sid}`);
              console.log(res.data)
              alert('收藏成功');
              // this.setState({
              //   list:res.data,
              // })
            })
      }else{
        $(currentCollection).children().attr('class','iconfont icon-shoucang');
        axios.get(`http://poem.daxunxun.com:8000/api/collect/delete?uid=${uid}&sid=${sid}`,{})
            .then((res) => {
              console.log(`http://poem.daxunxun.com:8000/api/collect/delete?uid=${uid}&sid=${sid}`);
              console.log(res.data)
              alert(res.data.message);
              // this.setState({
              //   list:res.data,
              // })
            })
      }
    }
    shiwenCtrlc () {
      alert('已复制到剪切板');
    }
    shiwenhover (event) {
      console.log(event.currentTarget)
      console.log($(event.currentTarget).parent().parent().parent().parent().children('.tools'))
      $(event.currentTarget).parent().parent().siblings('.shiwenerwima').css('display','block');
      $(event.currentTarget).attr('class','iconfont icon-xiaoxi_')
      
    }
    shiwenleave (event) {
      console.log(event.currentTarget)
      console.log($(event.currentTarget).parent().siblings('.shiwenerwima'))
      $(event.currentTarget).parent().siblings('.shiwenerwima').css('display','none');
      $(event.currentTarget).children().attr('class','iconfont icon-xiaoxi')
    }
    render () {
      const list = this.state.list;
      return (
        <div className = "container">
          <BaseHeader />
          <div className="containersWrap">
            <div className = "containers">
              <div className="shiwen_left">
                <div className="mingjutitletype" style={{background:'#F0EFE2', width:'668px',
    height:'95px',border:'1px solid #C8C7BC'}}>
                  <div className="mingjuson1">
                      <h1>不限<span>1 / 5+页</span></h1>
                  </div>
                  <div className="mingjuson2">
                    <div className="tleft">
                      <span className="zhuti">朝代：</span>
                    </div>
                    <div className="tmiddle">
                      <span>不限</span>
                      <span>唐代</span>
                      <span>清朝</span>
                      <span>明代</span>
                      <span>魏晋</span>
                      <span>两汉</span>
                    </div>
                    <div className="tright">
                      
                    </div>
                  </div>
                </div>
                <div className="zuozhecontent">
                  <div className="zuozhecont">
                    {
                      this.state.list.map((item, index) => {
                        if(item.autorIntroduce !== undefined){
                          return (
                            <div className="zuoxiangxi" key={index} style={{background:'#F0EFE2',border:'1px solid #C8C7BC',marginTop:'20px'}}>
                              <div key={index} className="zuozhecon" style={{width:'628px',minHeight:'150px',margin:'13px 20px 0 20px'}}>
                                <div className="zuozhephoto" style={{float:'left'}}>
                                  <img src={item.autorpictures} alt="" style={{display:'inline-block',marginRight:'15px'}}></img>
                                </div>
                                <p style={{fontSize:'18px',fontWeight:'bold',marginBottm:'10px',height:'32px',color:'#19537D'}}>{item.name}</p>
                                <p style={{fontSize:'14px',lineHeight:2}}>{item.autorIntroduce}</p>
                              </div>
                              <div className="tools">
                                <ul className="tool_img" style={{padding:'10px 20px'}}>
                                  <li onClick={this.shiwenCollection.bind(this)} style={{width:'18px',height:'30px',marginRight:'30px',display:'inline-block'}}><i className="iconfont icon-shoucang" style={{fontSize:'18px',fontWeight:'bold',color:'#A6A6A7'}}></i></li>
                                  <li onClick={this.shiwenCtrlc} style={{width:'18px',height:'30px',marginRight:'30px',display:'inline-block'}}><i className="iconfont icon-copy" style={{fontSize:'18px',fontWeight:'bold',color:'#A6A6A7'}}></i></li>
                                  <li className="shiwenxiaoxi" onMouseLeave={this.shiwenleave.bind(this)} style={{width:'18px',height:'30px',marginRight:'30px',display:'inline-block'}}><i className="iconfont icon-xiaoxi" onMouseEnter ={this.shiwenhover.bind(this)} style={{fontSize:'18px',fontWeight:'bold',color:'#A6A6A7'}}></i></li>
                                </ul>
                                <div className="shiwenerwima"></div>
                              </div>
                            </div> 
                          )
                        }
                      })
                    } 
                  </div>
                  <div className="shiwenpage" style={{width:'400px',height:'60px',lineHeight:'60px',margin:'0 auto'}}>
                    <Pagination simple defaultCurrent={1} total={50} onChange={this.onChange.bind(this)}/>
                  </div>
                </div>
              </div>
              <div className="shiwen_right">
                <div className="globalType">
                  <div className="type_title">
                    <div className="line"></div>
                    <b>作者</b>
                  </div>
                  <div className="type_cont">
                    {
                      list.map((itm, idx) => {
                        if (itm.autorIntroduce !== undefined){
                          return (
                            <span key={idx}>{itm.name}</span>
                          )
                        }
                      })
                    }
                  </div>
                </div>
              </div>
            </div>
            <GlobalBottom />
          </div>
        </div>
      )
    }
  }
  
  export default Com;